<template>
  <div class="container">
    <div class="top">组织机构</div>
    <div class="box">
      <div class="top1">
        <div class="left">
          <span>部门名称：</span>
          <el-input v-model="input1" class="first" placeholder="请输入部门名称"></el-input>

          <el-button type="primary" @click="search" @search="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </div>
        <div class="right">
          <!-- 新建 -->
          <System :new="get" showBetCode="xtsz-zzjg-xj"></System>
        </div>
      </div>
      <!-- 表格 -->

      <el-table
        :data="tableList"
        style="width:1540px"
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        border
        stripe
        default-expand-all
        :cell-style="changeCellStyle"
        :header-cell-style="rowClass"
      >
        <el-table-column label="部门名称" width="394px">
          <template slot-scope="scope">
            <!-- <el-checkbox v-model="checked"></el-checkbox> -->
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="type" label="组织类型" align="center" width="274px">
          <template slot-scope="scope">
            <span v-if="scope.row.type==1">集团</span>
            <span v-else-if="scope.row.type==2">集团部门</span>
            <span v-else-if="scope.row.type==3">二级公司</span>
            <span v-else-if="scope.row.type==4">部门</span>
            <span v-else>岗位</span>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="组织代码" align="center" width="225px"></el-table-column>
        <el-table-column prop="updatedBy" label="维护人" align="center" width="226px"></el-table-column>
        <el-table-column prop="updatedTime" label="创建时间" align="center" width="215px"></el-table-column>
        <el-table-column label="操作" align="center" width="204px">
          <template slot-scope="scope">
            <!-- 编辑 -->
            <!-- <el-button @click="handleClick(scope.row.id)">编辑</el-button> -->
            <System1 :id="scope.row.id" :click="get" showBetCode1="xtsz-zzjg-bj"></System1>
            <!-- 删除 -->
            <Delete1 :id="scope.row.id" :click='get' showBetCode2="xtsz-zzjg-sc"></Delete1>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import SingleDeletion from "@/components/Popup/SingleDeletion.vue";
import System from "@/components/XT/System.vue";
import Delete1 from "@/components/XT/Role/Delete1.vue";
import System1 from "@/components/XT/System1.vue";
export default {
  components: {
    SingleDeletion,
    System,
    System1,
    Delete1,
  },
  data() {
    return {
      tableList: [],
      checked:false,
      visible: true,
      // 部门名称
      input1: "",

      value: "",
    };
  },
  created() {
    this.get();
  },
  methods: {
    // handleClick(id) {
    //   console.log(id);
    //   this.$emit('showDialog',id);
    // },
    // 树形分类列表
    close() {
      this.dialogFormVisible = false;
    },
    get() {
      this.Api.geTtissue({
        orgName: "",
      }).then((res) => {
        this.tableList = res.data;
      });
    },
    // 搜索
    search() {
      this.Api.searchTtissue({
        orgName: this.input1,
      }).then((res) => {
        this.tableList = res.data;
      });
    },
    // 重置
    reset() {
      (this.input1 = ""), this.get();
    },
    changeCellStyle(row, column, rowIndex, columnIndex) {
      if (row.column.label === "标题") {
        return "padding-left: 20px"; // 修改的样式
      } else {
        return "";
      }
    },
    rowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === 1) {
        //指定坐标
        return "padding-left:12px";
      } else {
        return "";
      }
    },
  },
};
</script>
<style lang="less" scoped>
.top {
  width: 1540px;
  height: 68px;
  line-height: 68px;
  color: #333333;
  font-size: 20px;
  border-bottom: 1px solid #dddddd;
  box-sizing: border-box;
}

.top1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
}
.left {
  display: flex;
  margin-top: 19px;
  align-items: center;
}
.right {
  margin-top: 19px;
}
/deep/.left .el-input__inner {
  width: 154px;
  height: 36px;
}
/deep/.left .el-input {
  width: 154px;
}
.left span {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #333333;
}
.el-button {
  width: 52px;
  height: 36px;
  padding: 0;
}
.five {
  width: 60px;
  height: 28px;
  margin-right: 21px;
}
.first,
.second,
.third {
  margin-right: 20px;
}
/deep/ .add.el-button {
  width: 80px;
}
/deep/.el-pagination {
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: 700;
  margin-left: 850px;
  margin-top: 46px;
}
/deep/.el-pagination__jump {
  margin-left: 0;
  font-weight: 400;
  color: #606266;
}
.up {
  margin-right: 23px;
}
/deep/.el-dialog__header {
  padding: 20px 20px 10px;
  background: #e6e9ed;
}

/deep/.el-form-item__label {
  width: 82px !important;
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}

/deep/tbody {
  tr {
    height: 45px !important;
    td {
      padding: 0px 0 !important;
    }
  }
  tr td:last-child {
    .cell {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
/deep/tbody {
  tr td:nth-child(2) {
    .cell {
      padding-left: 20px;
    }
  }
}
/deep/.el-icon-warning:before {
  content: "\e7a3";
  position: absolute;
  top: -54px !important;
}
</style>